<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="1300" height="600"> </canvas>
		<script type="text/javascript">
		
			
			
			var chs= [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 0, 0, 0]
				], //9
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 0, 0, 0]
				], //9
[
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				], //10

			];
			var canvas = document.getElementById("mycanvas");
			var ctx = canvas.getContext("2d");
			
			
			var text =[0,0,11,0,0,11,0,0];
			var img =new Image();
			img.src = "img/timg (2).jpg";
			var date =new Date();
			
			var balls =[];
			img.onload =function(){
			
			setInterval(function(){
				ctx.clearRect(0,0,canvas.width,canvas.height);
				ctx.drawImage(img,0,0,canvas.width,canvas.height);
			
                var time = new Date();
                if (time.getSeconds()!= date.getSeconds()){
                	//秒数改变
                	var gw = date.getSeconds()%10;
                	addBall(850,120,gw);
        
                	var sw1 = parseInt(date.getSeconds()/10);
                	var sw2 = parseInt(time.getSeconds()/10);
                	if(sw1 !=sw2){
                		addBall(700,120,sw1);
                	}
                	
                	if (time.getMinutes()!= date.getMinutes()){
//              	判断秒数各位?
                var mgw = date.getMinutes()%10;
                addBall(550,120,mgw);
                var msw1 = parseInt(date.getMinutes()/10);
                var msw2 = parseInt(time.getMinutes()/10);
                 if(msw1!=msw2){
                 	addBall(400,120,msw1);
                 
                 }
                 }
                	//添加小球
                	
                	date = time;
                }
                	
                		
                	function addBall(ball1X,ball1Y,number){
                		
                		for(var i = 0; i< chs[number].length;i++){
                			var t1 = i *20;
                			for(var k=0;k< chs[number][i].length;k++){
                				var l1 =k* 20;
                				if(chs[number][i][k] == 1){
                					//添加小球
                					var vx = (Math.random()*5) + 5;
                	if(Math.random()> 0.5){
                		vx=-vx;
                	}
                	var vy = (Math.random()*10) + 5;
                	if (Math.random()>0.5){
                		vy =-vy;
                	}
                	var R = parseInt(Math.random()*256);
	    	        var g = parseInt(Math.random()*256);
	    	        var b = parseInt(Math.random()*256);
	    	        var a = Math.random();
	    	        var color ="rgba("+R+","+g+","+b+","+a+")";
	    	        balls.push([ball1X+l1,ball1Y+t1,7,vx,vy,color]);
                				}
                			}
                		}
                	
                }
                
                
                text[0] = parseInt(date.getHours()/10);
                text[1] = date.getHours()%10;
                text[3] = parseInt(date.getMinutes()/10);
                text[4] = date.getMinutes()%10;
                text[6] = parseInt(date.getSeconds()/10);
                text[7] = date.getSeconds()%10;
				for(var i=0;i< text.length;i++){
					
					if(i==2){
						drawNumber(110,i*130+100-10,text[i]);						
					}
					else if(i==3||i==4){
						drawNumber(110,i*130+100-60,text[i]);						
					}
					else if(i==5){
						drawNumber(110,i*130+100-80,text[i]);	}
					else if(i==6||i==7){
						drawNumber(110,i*130+100-140,text[i]);						
					}					
					else {
						drawNumber(110,i*130+100,text[i]);	
					}
				
				}
				drawBalls();
			},100);
			};
			
			function drawBalls(){
				for(var i =0;i<balls.length;i++){
					ctx.beginPath();
					ctx.fillStyle= balls [i][5];
					ctx.arc(balls[i][0],balls[i][1],balls[i][2],0,2*Math.PI);
					ctx.fill();
					balls[i][0] = balls[i][0]+balls[i][3];
					balls[i][1] = balls[i][1]+balls[i][4];
					balls[i][4] = balls[i][4]+3;
					if(balls[i][1] > canvas.height - balls[i][2]){
						balls[i][1] = canvas.height - balls [i][4];
						balls[i][4] = -balls[i][4]*0.5;//控制小球的弹跳
						
					}
				}
			}
			
			
			var yuanxin = 100;
			function drawNumber(arcX,arcY,num){
				var ch0= chs[num];
				
			    var r = 7;
//			    var R = parseInt(Math.random()*256);
//	    	            var g = parseInt(Math.random()*256);
//	    	            var b = parseInt(Math.random()*256);
//	    	            ctx.fillStyle = "rgb("+R+","+g+","+b+")";
                 ctx.fillStyle="lightpink";
                 ctx.fill();
			for(var i=0;i<ch0.length;i++)
	        	{
				for(var j=0;j<ch0[i].length;j++)
				{
					if(ch0[i][j] ==1){
						
	    	            
	    	
			        
					 var y1=arcY+2*r*j;
					 var y2=arcX+2*r*i;
			        
					 ctx.beginPath();
			         ctx.arc(y1,y2,r,0,2*Math.PI);
			         ctx.closePath();
		           	 ctx.stroke()
//			         ctx.fillStyle="#FF0000"; 
			         ctx.fill();
			    
			         
			        }
					 

			     continue;
			  }
			}
		}
			
		
			</script>
			<audio autoplay="autoplay" loop="loop" src="music/陈一发儿 - New Soul.mp3"></audio>
	</body>
</html>
